<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: flex;
        }
        main {
            padding: 20px;
        }
    </style>
</head>
<script type="text/javascript" src="part11.js"></script>
<body>
    <main class="main-one">
        <h1>dom中的选择器</h1>

        <h2>元素节点</h2>

        <h6>
            <p id="p1">id 选择器：使命特性</p>
            <p id="p1">就算有多个元素符合要求，也只选中第一个符合要求的元素</p>
            <p id="p1">选中之后元素节点对象，可以直接被相关DOM方法或属性操作</p>
            <script>
                document.getElementById("p1").style.background = "orange";
            </script>
        </h6>

        <h6>
            <p class="p2">class选择器：</p>
            <p>选中所有符合要求的元素，就算只有一个符合要求的元素，结果也是以数组的形式呈现</p>
            <p>选中之后的数组对象，不可以直接被相关DOM方法或属性操作</p>
            <p>必须先解析数组，拿到每个独立的节点对象后，再进行DOM操作</p>

            <script>
                var collectionOf = document.getElementsByClassName("p2");
                collectionOf[0].style.background = "orange";
            </script>
        </h6>


        <h6>
            <p class="p2">标签名选择器：</p>
            <p>结果返回集合</p>
            <b>b</b><br>
            <u>u</u><br>
            <del>del</del>

            <script>
                var elementsByTagName = document.getElementsByTagName("b");
                elementsByTagName[0].style.background = "orange"
            </script>
        </h6>

        <h6>
            <p>name选择器：</p>
            <!--    TODO    -->
            <p>注意：哪些元素才可以添加name?</p>
            <input type="button" value="btn" name="username">
            <!--        name 属性为文本区规定名称。
                        适用的标签有 <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>等。-->
            <script>
                var elementsByName = document.getElementsByName("username");
                elementsByName[0].style.background = "orange";
            </script>
        </h6>

        <h6>
            <p>ES5新增的选择器：</p>
            <script>
                //同 css 选择器，参见css选择器章节
                // ".className" "span" ".className p" ".className > p"
                var htmlHeadingElement = document.querySelector("h1");
                htmlHeadingElement.style.background = "pink"
            </script>
        </h6>

        <h6>
            <p>父子选择器（列表）</p>
            <ul style="width: 24%;" class="unorderedList">
                <li class="listItemOne">List Item One</li>
                <li>List Item Two</li>
                <li>List Item Three</li>
            </ul>

            <!--        在上面，控制台将显示“#text”，因为插入了一个文本节点来维护开头<p>和<span>标签之间的空白。任何 空格 都会创建一个#text节点，从单个空格到多个空格、回车符、制表符等等。   -->

            <script>
                var parent = document.querySelector(".unorderedList");
                var children = parent.children;
                let secondChild = children[1];
                secondChild.style.color = "green";
                let firstChild = parent.firstChild;
                // firstChild.style.color = "red";
                parent.firstElementChild.style.background = "pink"
                parent.lastElementChild.style.background = "pink"
                //选兄弟
                secondChild.nextElementSibling.style.border = "2px #333 solid"
                secondChild.previousElementSibling.style.border = "2px #555 solid"
                //子选父
                var element = document.querySelector(".listItemOne");
                element.parentNode.style.border = "2px red solid"
            </script>

        </h6>

        <h2>其他节点</h2>
        <h6>
            <!--    这是一段注释    -->
            <p class="other">子节点选择器：包含文本，注释，元素</p>

            <script>

            </script>

        </h6>



        <h2>过滤节点</h2>
        <p>获取到所有节点后，可以按子节点的 nodeName、nodeType、nodeValue 过滤</p>
        <p>nodeName、nodeType、nodeValue 过滤</p>
        <a href="https://www.jianshu.com/p/2f35235f7cca?u_atoken=1a51dd8a-7fc2-49eb-9002-75382dd884ed&u_asession=01cHgGY8wKWEOv0Dgz2jTp3fj3PLksglyYLVvZ03_3qf6KDIu-9zvezhYCR4rcmr4EX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K89ji76mmU6BkK4hswnHDd04hmsJyv-1hubKihelhNJtGBkFo3NEHBv0PZUm6pbxQU&u_asig=05aDW-yCHahwDpp8Xy5nhr0dcsu2-rzumoJ3pmxvxnYAmc2XpwJReOrVkCV2oiSILVIHYND8nvOE0bmnYbR7Udrq5eonRVeJCA1t03tFNyP38qMwqhSqjej0I7mGTM5MXS-NxsgL6PDNqY3YPxBetaHAPcA1JhangrZk0SAdCfd8H9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzbzm5AwTXs2pjqOTV3Vsb8HEKx3h3W-JKYDTjwSlkQmS6vxqedUl-eZLCupCM_ImYu3h9VXwMyh6PgyDIVSG1W9-Wp1EUTmmBWH2Wna7wZ1Tvsa4IXsNKGHOd3clcVPxz_Z9LyC_IMkFfBqaf6UF26kPPnXkXOK9SGv9xgedPBNrmWspDxyAEEo4kbsryBKb9Q&u_aref=6qHWTuBO1U4foUOcUAh%2FPaKAIB8%3D">
            关于 nodeType 、nodeName 、nodeValue
        </a>

    </main>

    <main>
        <h2 class="changeId" id="h2">属性操作 <span>id =  </span></h2>

        <input type="text" id="idValue">
        <input type="button" value="html属性 - 修改 id" onclick= setId()>

        <script>
            function setId() {
                var idValue = document.getElementById("idValue").value;
                console.log(idValue);
                document.querySelector(".changeId").id = idValue;
                document.querySelector(".changeId span").innerText = "id = " + idValue;
            }
        </script>

        <input type="button" value="html自定义属性 - 增加 idddddd = 这是自定义的html属性abc "><br>
        <input type="button" value="移除属性 - "><br>
        <input type="button" value="获取自定义属性"><br>
        <input type="button" value="获取 js 内置属性 className ✅" id="getJsClassName"><br>

        <script>
            getJsClassName.onclick = function(){
                var nodeListOf = document.querySelectorAll("input");
                nodeListOf[0].className = "classNameGoGoGo"
                alert(nodeListOf[0].className);
            }
        </script>

        <input type="button" value="获取 js 内置属性 classList">
        <input type="button" value="获取 js 内置属性 tagName">
        <input type="button" value="获取 js 内置属性 checked">
        <input type="button" value="获取 js 自定义属性">


        <h2>样式操作</h2>
        <input type="button" value="获取行内样式">

        <input type="button" value="获取非行内样式">

        <input type="button" value="设置行内样式">

<!--        // // 所有样式都无法删除，只能清空，或设置为初始值-->
        <input type="button" value="清除行内样式">

        <input type="button" value="批量设置行内样式">

        <h6>getComputedStyle()</h6>
        <input type="button" value="获取非行内样式">
        <input type="button" value="设置非行内样式">
        <input type="button" value="获取行内样式">

    </main>



</body>
</html>